<template>
  <div class="footer">
    <ul class="nav-list1">
      <li
        v-for="(item,index) in tabBars"
        :key="index"
        :class="pageName == item.page?'on':''"
        @click="handleToggle(index)"
      >
        <router-link v-bind:to="{name:item.page}">{{item.title}}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "TabBar",
  data() {
    return {
      tabBars: [
        {
          title: "监管总览",
          page: "index"
        },
        {
          title: "经营户统计",
          page: "management"
        },
        {
          title: "检查统计",
          page: "inspect"
        },
        {
          title: "重点监测",
          page: "importantMonitor"
        },
        {
          title: "考核统计",
          page: "assessment"
        },
        {
          title: "指挥调度",
          page: "command"
        },
        {
          title: "视频监管",
          page: "cleankitchen"
        }
      ],
      activeIndex: 0
    };
  },
  computed: {
    pageName() {
      return this.$route.name || "index";
    }
  },
  created() {
	  var _bigDataArea = localStorage.getItem('bigDataArea');
	  var _isOrganUser = localStorage.getItem('isOrganUser');
	  if(_bigDataArea&&_isOrganUser!=1){
	  	//如果是区县
	  	this.tabBars = [
	  		{
	  		  title: "监管总览",
	  		  page: "index"
	  		},
	  		{
	  		  title: "经营户统计",
	  		  page: "management"
	  		},
	  		{
	  		  title: "检查统计",
	  		  page: "inspect"
	  		},
	  		{
	  		  title: "重点监测",
	  		  page: "importantMonitor"
	  		},
	  		{
	  		  title: "考核统计",
	  		  page: "assessment"
	  		},
	  		{
	  		  title: "洁厨亮灶",
	  		  page: "cleankitchen"
	  		}
	  	]
	  }else if(_isOrganUser==1){
	  	//是分局
	  	this.tabBars = [
	  		{
	  		  title: "监管总览",
	  		  page: "jgzl"
	  		},
	  		{
	  		  title: "运行情况",
	  		  page: "yxqk"
	  		},
	  	]
	  }
  },
  methods: {
    handleToggle(index) {
      this.activeIndex = index;
      this.$emit("handle", index);
    },
    flushCom:function(){
      this.$router.go(0);
    }
  },
};
</script>

<style scoped lang="less">
* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
  color: #c2d6ff;
}
.nav-list1 {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.8rem;
  margin: auto;
  width: 1200px;
  text-align: center;
  z-index: 1000;
  -webkit-display: flex;
  -webkit-justify-content: space-around;
  display: flex;
  justify-content: space-around;
}
.nav-list1 li {
  width: 157px;
  height: 56px;
  background: url(../../assets/footer.png) no-repeat left top;
  background-size: 100% 100%;
  color: #c2d6ff;
  font-size: 16px;
  line-height: 56px;
  text-align: center;
  margin-right: 40px;
}
.nav-list1 .on {
  height: 56px;
  line-height: 56px;
  background: url(../../assets/footer_on.png) no-repeat left top;
  background-size: 100% 100%;
}
.nav-list1 a {
  display: inline-block;
  width: 157px;
  color: #fff;
}
</style>
